<template>
  <div>
    <el-card style="margin: 20px 0">
      <!-- 三级联动已经是全局组件 -->
      <CateGorySelect @getCateGoryId="getCateGoryId" :show="scene != 0" />
    </el-card>
    <el-card>
      <!-- 底部卡片有三部分进行切换 -->
      <div v-show="scene == 0">
        <!-- 展示SPU列表的结构 -->
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加SPU</el-button>
        <el-table style="width: 100%" border :data="records">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-tooltip class="item" effect="dark" content="添加sku" placement="top-start">
                <el-button type="success" icon="el-icon-plus" size="mini" @click="addSku(row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改spu" placement="top-start">
                <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateSpu(row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看当前spu全部sku列表" placement="top-start">
                <el-button type="info" icon="el-icon-info" size="mini" @click="handler(row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除spu" placement="top-start">
                <el-popconfirm title="确定删除此spu吗？" @onConfirm="deleteSpu(row)">
                  <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference" style="margin-left: 10px">
                  </el-button>
                </el-popconfirm>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="total" :page-sizes="[3, 5, 10]" :current-page="page" :page-size="limit"
          style="text-align: center" layout="prev, pager, next, jumper, ->, sizes, total"
          @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
      </div>
      <SpuForm v-show="scene == 1" @changeScene="changeScene" ref="spu"></SpuForm>
      <SkuForm v-show="scene == 2" @changeScenes="changeScenes" ref="sku"></SkuForm>
    </el-card>
    <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="close">
     <el-table :data="skuList" border v-loading="loading">
       <el-table-column label="名称" prop="skuName"></el-table-column>
       <el-table-column label="价格" prop="price"></el-table-column>
       <el-table-column label="重量" prop="weight"></el-table-column>
       <el-table-column label="默认图片" >
       <template slot-scope="{row,$index}">
       <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
       </template>
       </el-table-column>
     </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from "./SpuForm";
import SkuForm from "./SkuForm";
export default {
  name: "Spu",
  components: {
    SpuForm,
    SkuForm,
  },
  data () {
    return {
      //分类的id
      category1Id: "",
      category2Id: "",
      category3Id: "",
      //控制三级联动的可操作性
      show: true,
      page: 1, //分页器当前页
      limit: 3, //每一页展示的数据条数
      records: [], //spu列表数据
      total: 0, //分页器一共需要展示的数据条数
      scene: 0, //0展示spu列表数据，1展示添加|修改spu，2添加sku
      dialogTableVisible:false,
      spu:{},
      skuList:[],
      loading:true,
    };
  },
  methods: {
    //点击分页器页码回调
    handleCurrentChange (page) {
      this.page = page;
      this.getSpuList(this.page);
    },
    //pageSize改变回调
    handleSizeChange (limit) {
      this.limit = limit;
      this.getSpuList();
    },
    // 三级联动自定义事件，把子组件id传给父组件
    getCateGoryId ({ categoryID, level }) {
      //categoryId:获取到一、二、三级分类id level区分几级id
      if (level == 1) {
        this.category1Id = categoryID;
        // 清除2、3级分类的id
        this.category2Id = "";
        this.category3Id = "";
      } else if (level == 2) {
        this.category2Id = categoryID;
        this.category3Id = "";
      } else {
        this.category3Id = categoryID;
        //获取SPU列表数据展示
        this.getSpuList();
      }
    },
    //获取SPU列表数据的方法
    async getSpuList (pages = 1) {
      this.page = pages;
      const { page, limit, category3Id } = this;
      // 携带三个参数：page第几页 limit每一页需要展示多少条数据 category3Id
      let result = await this.$api.spu.reqSpuList(page, limit, category3Id);
      if (result.code == 200) {
        this.total = result.data.total;
        this.records = result.data.records;
      }
    },
    //添加Spu按钮的回调
    addSpu () {
      this.scene = 1;
      //通知子组件spuform发请求
      this.$refs.spu.addSpuData(this.category3Id);
    },
    //修改某一个Spu
    updateSpu (row) {
      this.scene = 1;
      //获取spuForm子组件,调用子组件初始化数据的方法
      this.$refs.spu.initSpuData(row);
    },
    //SpuForm自定义事件回调
    changeScene ({ scene, flag }) {
      this.scene = scene;
      //flag是为了区分保存按钮是添加还是修改
      if (flag == "修改") {
        //切换场景后，再次获取spu列表数据展示
        this.getSpuList(this.page);
      } else {
        this.getSpuList();
      }
    },
    //删除spu回调
    async deleteSpu (row) {
      let result = await this.$api.spu.reqDeleteSpu(row.id);
      if (result.code == 200) {
        this.$message.success("删除成功!");
        //当前页数据个数大于1，删除完停留在当前页，小于1回到上一页
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
      }
    },
    //添加sku按钮的回调
    addSku (row) {
      //切换场景
      this.scene = 2;
      this.$refs.sku.getData(this.category1Id, this.category2Id, row);
    },
    //skuForm取消按钮触发事件
    changeScenes (scene) {
      this.scene = scene;
    },
    //查看sku的按钮的回调
    async handler(row){
        this.spu = row
        this.dialogTableVisible = true;
       let result = await this.$api.spu.reqSkuList(row.id)
       if (result.code == 200) {
        this.skuList = result.data;
        this.loading = false
       }
    },
    //关闭对话框的回调
    close(done){
        this.loading = true;
        this.skuList = [];
        done();
    }
  },
};
</script>

<style></style>
